<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <link rel="icon" href="../img/juejinlogo.svg">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fontawesome/css/all.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/passage.css">
    <script src="https://unpkg.com//axios@0.27.2/dist/axios.min.js"></script>
    <script src="../js/header.js"></script>
    <script src="../js/passage.js"></script>


</head>

<body>
    <!-- 最顶部导航栏 -->
    <div class="headerContainer">
        <header>
            <div class="leftPart">
                <!-- 稀土掘金的图标 -->
                <div class="logo">
                    <img src="../img/logo.svg" alt="">
                </div>

                <!-- 目录 -->
                <ul class="headerTitle">
                    <li>首页</li>
                    <li>沸点</li>
                    <li>课程</li>
                    <li>直播</li>
                    <li>活动</li>
                    <li>商城</li>
                    <li>APP</li>
                    <li>插件</li>
                </ul>
            </div>

            <div class="rightPart">
                <!-- 搜索框 -->
                <div class="searchContainer">
                    <!-- 搜索框 -->
                    <input id="searchBox" type="text" placeholder="探索稀土掘金">
                    <!-- 展示的下拉列表 -->
                    <ul class="listBox" id="listBox"></ul>
                    <!-- 查询图标 -->
                    <div class="searchIcon">
                        <div class="fas fa-search"></div>
                    </div>
                </div>

                <!-- 创作者中心 -->
                <div class="createCenter">
                    <p>创作者中心</p>
                    <div class="more"></div>
                </div>

                <!-- 会员 -->
                <div class="vip">
                    <img src="../img/vip.svg" alt="">
                    <p>会员</p>
                </div>

                <!-- 用户已登录 -->
                <div class="userIn">
                    <div class="fas fa-bell"></div>
                    <div class="userPhoto">
                        <img id="avatar" alt="">
                    </div>
                    <!-- 隐藏的功能菜单 -->
                    <div class="hiddenFun">
                        <ul class="funList">
                            <li class="goNotes">
                                <img src="../img/写文章.png" alt="">
                                <p>写文章</p>
                            </li>
                            <li>
                                <img src="../img/草稿箱.png" alt="">
                                <p>草稿箱</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="goUserMes">
                                <img src="../img/我的主页.png" alt="">
                                <p>我的主页</p>
                            </li>
                            <li>
                                <img src="../img/我赞过的.png" alt="">
                                <p>我赞过的</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的课程.png" alt="">
                                <p>我的课程</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的优惠劵.png" alt="">
                                <p>我的优惠劵</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/掘金会员.png" alt="">
                                <p>掘金会员</p>
                            </li>
                            <li>
                                <img src="../img/我的收藏.png" alt="">
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <img src="../img/成长福利.png" alt="">
                                <p>成长福利</p>
                            </li>
                            <li>
                                <img src="../img/标签管理.png" alt="">
                                <p>标签管理</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/浏览记录.png" alt="">
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <img src="../img/我的报名.png" alt="">
                                <p>我的报名</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li>
                                <img src="../img/设置.png" alt="">
                                <p>设置</p>
                            </li>
                            <li>
                                <img src="../img/关于.png" alt="">
                                <p>关于</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="exit">
                                <img src="../img/退出.png" alt="">
                                <p>退出</p>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 用户未登录 -->
                <button class="userOut">登录</button>

                <!-- 登录界面 -->
                <div class="loginBlock">
                    <!-- 遮罩层 -->
                    <div class="overlay">
                        <!-- 登录注册块 -->
                        <div class="loginBox">
                            <!-- 选择功能 -->
                            <div class="funSelect">
                                <div class="loginFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>登录</p>
                                </div>
                                <div class="registerFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>注册</p>
                                </div>
                            </div>

                            <!-- 关闭 -->
                            <div class="close">
                                <div class="fas fa-times"></div>
                            </div>

                            <!-- 不同输入状态时显示不同的图片 -->
                            <div class="inputState">
                                <img src="../img/openEye.svg" alt="">
                            </div>

                            <!-- 不同身份时选择登录或者注册的界面 -->
                            <ul class="interface">
                                <!-- 登录界面 -->
                                <li class="login">
                                    <form class="type" id="login" action="">
                                        <input class="userName" id="loginName" type="text" autocomplete="off"
                                            placeholder="请输入您的用户名">
                                        <input class="userPassword" id="loginPassword" type="password"
                                            autocomplete="off" placeholder="请输入您的密码">
                                        <input class="userBtn" id="loginBtn" type="button" autocomplete="off"
                                            value="登录">
                                        <div class="otherFunc">
                                            <p>没有账号？<span class="go">去注册</span></p>
                                            <div class="checkbox">
                                                <input type="checkbox" autocomplete="off">
                                                <p>记住我</p>
                                                <div class="fas fa-question-circle"></div>
                                                <span class="loginFree">七天免登录</span>
                                            </div>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 普通用户的注册界面 -->
                                <li class="register">
                                    <form class="type" id="register" action="">
                                        <input class="userName" id="registerName" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn" type="button" autocomplete="off"
                                            value="普通用户注册">
                                        <div class="otherFunc">
                                            <p>已有账号？<span class="go">去登录</span></p>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 管理员注册界面 -->
                                <li id="hidden">
                                    <form class="type" id="register0" action="">
                                        <input class="userName" id="registerName0" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword0" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn0" type="button" autocomplete="off"
                                            value="管理员注册">
                                    </form>
                                </li>
                            </ul>

                            <!-- 管理员注册的隐藏按钮 -->
                            <div class="hiddenDot"></div>

                            <!-- 消息提示 -->
                            <ul class="message">
                                <li>登录成功！稀土掘金欢迎您！</li>
                                <li>登录失败！请重新输入用户名和密码！</li>
                                <li>注册成功！请返回登录页登录！</li>
                                <li>注册失败！用户名已存在！</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </header>
    </div>

    <!-- 中心内容 -->
    <section class="main">
        <!-- 左侧正文部分 -->
        <div class="leftSection">
            <!-- 文章详情部分 -->
            <article>
                <!-- 文章标题 -->
                <div class="passageTitle"></div>

                <!-- 文章信息 -->
                <ul class="passageMes">
                    <!-- 作者头像 -->
                    <li class="userInfoAvatar">
                        <img src="" alt="">
                    </li>
                    <!-- 作者用户名、文章创作时间和阅读数量 -->
                    <li class="userInfoElse">
                        <div class="userInfoName"></div>
                        <ul>
                            <li class="createTime"></li>
                            <li>&nbsp · &nbsp</li>
                            <li>阅读 51667</li>
                        </ul>
                    </li>
                    <!-- 关注 -->
                    <li class="follow">
                        + 关注
                    </li>

                </ul>

                <!-- 文章图片 -->
                <div class="passageImg">
                    <img src="" alt="">
                </div>

                <!-- 文章内容 -->
                <div class="passageContent"></div>
            </article>

            <!-- 评论部分 -->
            <div class="comment"></div>



        </div>

        <!-- 右侧其他部分 -->
        <div class="rightSection">
            <!-- 文章信息 -->
            <div class="passageInfo">
                <!-- 作者信息 -->
                <ul class="userMes">
                    <!-- 作者头像 -->
                    <li class="userInfoAvatar">
                        <img src="" alt="">
                    </li>

                    <!-- 作者用户名和职业 -->
                    <li class="userInfoElse">
                        <div class="userInfoName"></div>
                        <ul class="userInfoSet">
                            <li class="userInfoJob">航空母舰设计师</li>
                            <li>&nbsp;@&nbsp;</li>
                            <li class="userInfoCompany">星际研究所</li>
                        </ul>
                    </li>
                </ul>

                <div class="likeAchieve">
                    <div class="icon">
                        <img src="../img/likeicon.svg" alt="">
                    </div>
                    <p>获得点赞 1,187</p>
                </div>

                <div class="passageReading">
                    <div class="icon">
                        <img src="../img/eyeicon.svg" alt="">
                    </div>
                    <p>文章被阅读 76,894</p>
                </div>

            </div>

            <!-- 下载APP -->
            <div class="downloadAPP">
                <img src="../img/qrcode.jpg" alt="">
                <div class="downloadText">
                    <p>下载稀土掘金APP</p>
                    <p>一个帮助开发者成长的社区</p>
                </div>
            </div>

            <!-- 找对属于你的技术圈子 -->
            <div class="adv">
                <img src="../img/adv-find.png" alt="">
            </div>

            <!-- 相关文章 -->
            <div class="relatedPassage">
                <title>相关文章</title>
                <ul>
                    <li>
                        <p>Javascript! 震惊你，只需要一行代码！</p>
                        <p>426点赞&nbsp; · &nbsp;83评论</p>
                    </li>
                    <li>
                        <p>玩转数组高级技法，成为JS高手</p>
                        <p>140点赞&nbsp; · &nbsp;28评论</p>
                    </li>
                    <li>
                        <p>这一次，彻底弄懂Javascript执行机制</p>
                        <p>7343点赞&nbsp; · &nbsp;808评论</p>
                    </li>
                    <li>
                        <p>13个Javascript一行程序，让你看起来像个专家</p>
                        <p>265点赞&nbsp; · &nbsp;54评论</p>
                    </li>
                    <li>
                        <p>Ts高手篇：22个示例深入讲解Ts最晦涩难懂的高级类型工具</p>
                        <p>1725点赞&nbsp; · &nbsp;138评论</p>
                    </li>
                </ul>
            </div>

            <!-- 目录 -->
            <div class="directory">
                <title>目录</title>
                <ul>
                    <li></li>
                </ul>
            </div>


        </div>

        <!-- 左侧栏 -->
        <aside class="articleSuspendedPanel">
            <ul>
                <li class="passageLikeCount">
                    <div class="fa fa-thumbs-up"></div>
                    <p></p>
                </li>
                <li class="passageCommentCount">
                    <div class="fa fa-comment"></div>
                    <p></p>
                </li>
                <li>
                    <div class="fa fa-star"></div>
                </li>
                <li class="share">
                    <div class="fa fa-share"></div>
                    <div class="shareWay">
                        <div class="item">
                            <div class="fab fa-weixin"></div>
                            <p>微信</p>
                        </div>
                        <div class="item">
                            <div class="fab fa-weibo"></div>
                            <p>新浪微博</p>
                        </div>
                        <div class="item">
                            <div class="fab fa-qq"></div>
                            <p>QQ</p>
                        </div>
                    </div>
                </li>
                <li></li>
                <li>
                    <div class="fa fa-exclamation-triangle"></div>
                </li>
                <li>
                    <div class="fa fa-arrows-alt"></div>
                    <p>沉浸阅读</p>
                </li>
            </ul>
        </aside>

    </section>

</body>

</html>